<template>
	<Layout class="layout-container">
		<Content>
			<Tabs value="password" class="profile-tabs">
		        <TabPane icon="ios-card" :label="$t('profile.password.title')" name="password">
		        	<Form ref="password" :model="value" :rules="rules">
		        		<Layout class="layout-container">
		        			<Content class="padding-all">
				        		<FormItem :label="labels.oldPassword" prop="oldPassword" class="form-item-width">
				                    <Input 
				                    	v-model="value.oldPassword"
				                    	type="password"
				                    	:disabled="submiting"
				                    	:placeholder="$t('info.placeholder', [labels.oldPassword])"></Input>
				                </FormItem>
				        		<FormItem :label="labels.password" prop="password" class="form-item-width">
				                    <Input 
				                    	v-model="value.password"
				                    	icon="ios-eye-outline"
				                    	:type="passwordType"  
				                    	:placeholder="$t('info.placeholder', [labels.password])" 
				                    	:disabled="submiting"
				                    	@on-click="changePassworeType"></Input>
				                </FormItem>
		                	</Content>
			                <div class="padding-all">
			                	<Button type="primary" html-type="submit" class="pull-right" @click.prevent="submit" :disabled="submiting">{{button.text}}</Button>	
			                </div>
			            </Layout>
		        	</Form>
		        </TabPane>
		        <TabPane icon="md-cog" :label="$t('profile.launcher.title')" name="launcher" class="padding-all">
		        	<Form ref="launcher" label-position="left" :label-width="80">
		        	<Layout class="layout-container">
		        		<Content>
		        			<Alert v-if="launcher.launchers.length == 0" type="warning">
		        				{{$t("profile.launcher.nolaunchers")}}
		        			</Alert>
		        			<template v-for="item in launcher.launchers">
			        		<FormItem :key="item.id" :label="item.name" class="form-item-width">
			        			<i-switch :key="item.id" size="large" name="enable" v-model="item.enable" 
			        				@on-change="onSwitchChange(item)">
				            		<span slot="open">{{launcher.on}}</span>
				        			<span slot="close">{{launcher.off}}</span>
				            	</i-switch>
			        		</FormItem>
			        		</template>
		        		</Content>
		        	</Layout>
		        	</Form>
		        </TabPane>
		    </Tabs>
		</Content>
	</Layout>
</template>
<script type="text/javascript">
import { Layout, Content, Tabs, TabPane, Form, FormItem, Button, Icon, Input, Alert, Switch } from 'view-design';
import { success, error, uninit } from 'config/utils';
import { changePassword, loadLaunchers, changeLauncherEnable } from './api'

export default {
	name: "SysProfile",
	data() {
		return {
			value: {
				password: '',
				oldPassword: ''
			},
			labels: {
				password: this.$t('profile.password.newPassword'),
				oldPassword: this.$t('profile.password.oldPassword')
			},
			rules: {
				oldPassword: {
					label: this.$t('profile.password.oldPassword'),
					type: "string",
					required: true,
					min: 6,
					max: 32,
					trigger: "blur"
				},
				password: [
					{
						label: this.$t('profile.password.newPassword'),
						required: true,
						type: "string",
						min: 6,
						max: 32,
						trigger: 'blur'
					},
					{
						validate: (value, rule, label, messages) => {
					    	return value != this.value.oldPassword;
					    },
					    message: this.$t('valid.oldNewPassword'),
						trigger: 'blur'
					}
				]
			},
			plaintext: false,
			submiting: false,
			button: {
				text: this.$t('info.submit')
			},
			launcher: {
				launchers:[],
				on:this.$t("info.on"),
				off:this.$t("info.off")
			}
		};
	},
	computed: {
		passwordType() {
			return this.plaintext ? "text" : "password";
		}
	},
	methods: {
		changePassworeType() {
			this.plaintext = !this.plaintext;
		},
		submit() {
			this.$refs.password.validate((valid) => {
				if(valid) {
					this.submiting = true;
					changePassword(this.value, (res) => {
						if(res.success) {
							this.value = {
								password: '',
								oldPassword: ''
							};
							success(this.$t("profile.password.success"), function() {
								uninit();
							});
						} else if(res.code == 1) {
							error(this.$t("profile.password.error"));
						}
						this.submiting = false;
					});
				}
			});
		},
		loadLaunchers:function() {
			loadLaunchers((res) => {
				if(res.success) {
					this.launcher.launchers = res.data;
				}
			});
		},
		onSwitchChange(launcher) {
			changeLauncherEnable(launcher.id, launcher.enable);
		}
	},
	mounted() {
		this.loadLaunchers();
	},
	components: {
		Layout,
		Content,
		Tabs,
		TabPane,
		Form,
		FormItem,
		Button,
        Icon,
        Input,
        Alert,
        iSwitch: Switch
	}
}
</script>
<style type="text/css">
	.profile-tabs {
		height: 100%;
	}
	.profile-tabs .ivu-tabs-content {
		position:relative;
		height: 396px;
	}

	.profile-tabs .ivu-tabs-content .ivu-tabs-tabpane {
		position: relative;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.profile-tabs form {
		position: relative;
		height: 100%;
		width: 100%;
	}
</style>